<div class="col-lg-3">
  <div class="panel panel-info">
      <div class="panel-heading">{{item.name}}</div>
      <!-- <div class="panel-body"><small>This could be this items description</small></div> -->
      <ul class="list-group">
          <li class="list-group-item"><h5>Name <span class="pull-right">{{item.name}}</span></h5></li>
          <li class="list-group-item"><h5>Technology <span class="pull-right">{{item.technology}}</span></h5></li>
          <li class="list-group-item"><h5>Region <span class="pull-right">{{item.region}}</span></h5></li>
          <li class="list-group-item"><h5>Account <span class="pull-right">{{item.account}}</span></h5></li>
          <li class="list-group-item"><h5>Account Type<span class="pull-right">{{item.account_type}}</span></h5></li>
      </ul>
  </div>
  <div class="panel panel-info">
      <div class="panel-heading">Discovery Timeline<span class="pull-right badge">{{item.revisions.length}}</span></div>
      <div class="panel-body"><small>Jumplist of revisions Security Monkey has discovered.</small></div>
      <div class="list-group">
          <a ng-repeat="rev in item.revisions" class="list-group-item" ng-click="scrollTo(rev.id)">
            {{rev.date_created | date:'medium'}}
          </a>
      </div>
  </div>
</div>

<div class="col-lg-9">

    <div ng-if="is_error" class="alert alert-danger">
      {{err_message}}
    </div>

    <div ng-if="is_loading" class="alert alert-info">
      <p>Loading . . .</p>
    </div>

  <div class="panel panel-warning" >
    <div class="panel-heading">Item Comments <span class="pull-right badge">{{item.comments.length}}</span></div>
    <div class="panel-body"><p class="text-warning">A discussion of this item.  Item revisions may also have comments.</p></div>
    <table class="table" ng-if="item.has_comments">
        <tr ng-repeat="comment in item.comments">
          <td>
            <ul class="list-unstyled">
              <li class="text-muted">{{ comment.user }}</li>
              <li class="text-muted">{{ comment.date_created | date:'medium' }}</li>
            </ul>
          </td>
          <td>{{ comment.text }}</td>
          <td>
            <button
              ng-if="comment.user==user"
              ng-click="removeComment(comment.id)"
              class="btn btn-xs btn-danger pull-right">
                <i class="glyphicon glyphicon-remove"></i>
            </button>
          </td>
        </tr>
    </table>
      <div ng-if="us.hasRole('Comment')" class="panel-footer">
        <div class="input-group">
          <input ng-model="addingComment" type="text" maxlength="1024" class="form-control">
          <span class="input-group-btn">
            <button class="btn btn-default btn-primary"
                     type="button"
                     ng-click="addComment()">Add Comment</button>
          </span>
        </div><!-- /input-group -->
      </div>
  </div>

  <div class="panel panel-danger" ng-if="item.has_unjustified_issues">
    <div class="panel-heading">Issues <span class="pull-right badge">{{item.unjustified_issues.length}}</span></div>
    <div class="panel-body"><p class="text-danger">Attention! The following issues have been raised and need to be fixed or justified.</p></div>
    <table class="table">
      <tr>
        <th ng-if="us.hasRole('Justify')"></th>
        <th>Issue</th>
        <th>Score</th>
        <th>Notes</th>
      </tr>
      <tr ng-repeat="issue in item.unjustified_issues">
        <td ng-if="us.hasRole('Justify')"><div class="text-center"><input type="checkbox" ng-model="issue.selected_for_justification" /></div></td>
        <td>{{issue.issue}}</td>
        <td>{{issue.score}}</td>
        <td>
            <span ng-if="issue.has_sub_item">Related to:
              <a ng-repeat="link in issue.item_links" href="#/viewitem/{{link.id}}">{{link.name}}</a>
            </span>
            {{issue.notes}}
        </td>
      </tr>
    </table>
    <div ng-if="us.hasRole('Justify')" class="panel-footer">
      <div class="input-group">
        <input class="form-control" type="text" ng-model="justification" />
        <span class="input-group-btn">
          <button class="btn btn-primary" ng-click="justify()" type="button">Justify</button>
        </span>
      </div>
    </div>
  </div>

  <div class="panel panel-warning" ng-if="item.has_justified_issues">
    <div class="panel-heading">Justified Issues <span class="pull-right badge">{{item.justified_issues.length}}</span></div>
    <table class="table">
      <tr>
        <th></th>
        <th>Issue</th>
        <th>Justification</th>
        <th>Score</th>
        <th>Notes</th>
        <th></th>
      </tr>
      <tr ng-repeat="issue in item.justified_issues">
        <td>
          <ul class="list-unstyled">
            <li class="text-muted">{{issue.justified_user}}</li>
            <li class="text-muted">{{issue.justified_date}}</li>
          </ul>
        </td>
        <td>{{issue.issue}}</td>
        <td>{{issue.justification}}</td>
        <td>{{issue.score}}</td>
        <td>
            <span ng-if="issue.has_sub_item">Related to:
              <a ng-repeat="link in issue.item_links" href="#/viewitem/{{link.id}}">{{link.name}}</a>
            </span>
            {{issue.notes}}
        </td>
        <td>
          <button ng-if="issue.justified_user==user"
              ng-click="removeJustification(issue.id)"
              class="btn btn-xs btn-danger pull-right">
            <i class="glyphicon glyphicon-remove"></i>
          </button>
        </td>
      </tr>
    </table>
  </div>


  <div infinite-scroll="loadMore()" infinite-scroll-distance="3">
    <div id="rev_id_{{rev.id}}" ng-repeat="rev in displayed_revisions">
        <itemrevision revision_id="{{rev.id}}" compare_revision_id="{{prev_rev(rev.id)}}">
        </itemrevision>
    </div>
  </div>
</div>
